
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>8、效率提升策略 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>8、效率提升策略 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在Cursor中，如何配置和定义自动化任务以减少重复性工作？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">通过在项目根目录下创建并配置 `.vscode/tasks.json` 文件来定义自动化任务。在该文件中，可以定义构建、测试、部署等任务，设置任务间的依赖关系，组合多个任务，并为常用操作配置快捷键，实现一键触发。</div>
          </div>
          <div class="card-source">来源: 8.1 工作流优化 -> 任务自动化</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在Cursor的命令面板中，有哪些常用的前缀可以帮助快速导航和执行命令？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在命令面板中，可以使用以下前缀：'>' 用于执行命令，'@' 用于导航到文件中的符号，'#' 用于搜索整个工作区的符号，':' 用于跳转到指定的行号。</div>
          </div>
          <div class="card-source">来源: 8.1 工作流优化 -> 快捷键与命令面板</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">如何在Cursor中创建自定义代码片段，它们支持哪些高级功能？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">通过 “文件 > 首选项 > 用户代码片段” 来创建自定义代码片段。它们支持高级功能，包括定义变量、设置多光标位置和占位符，并且可以使用 Tab 键在占位符之间快速切换。</div>
          </div>
          <div class="card-source">来源: 8.1 工作流优化 -> 模板与代码片段</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技巧</div>
          <div class="card-question">为了提高Cursor中AI响应的准确性和实用性，文档推荐了哪四种核心策略？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技巧</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 明确指令结构：使用如“生成”、“解释”、“优化”等动词开头。2. 提供充分上下文：描述项目背景、目标和代码风格。3. 分步骤交互：将复杂任务分解成小步骤，逐步迭代。4. 角色与目标设定：为AI设定特定角色（如“安全专家”）和明确目标。</div>
          </div>
          <div class="card-source">来源: 8.2 AI协作技巧 -> 提高AI响应质量</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档中描述的“迭代式生成”代码的方法是怎样的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“迭代式生成”是一种分步的代码生成策略。首先让AI生成一个基本的功能框架，然后针对生成的结果提出具体的改进建议以补充细节，对于复杂的功能则分批处理其各个组成部分。</div>
          </div>
          <div class="card-source">来源: 8.2 AI协作技巧 -> 有效的代码生成</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">流程</div>
          <div class="card-question">利用Cursor进行AI辅助代码重构时，推荐的工作流程包含哪些步骤？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">流程</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">推荐的流程包括四个主要步骤：1. 重构前评估：让AI分析代码问题并提出重构策略。2. 渐进式重构：将大型重构分解为小步骤，每步完成后运行测试。3. 重构模式应用：让AI识别并应用适用的重构模式。4. 代码一致性确保：重构后使用AI检查代码风格和接口兼容性。</div>
          </div>
          <div class="card-source">来源: 8.2 AI协作技巧 -> AI辅助重构流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">优化</div>
          <div class="card-question">在处理大型项目时，有哪些方法可以优化Cursor的性能，确保其流畅运行？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">优化</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">优化大型项目性能的方法包括：使用工作区文件夹排除不必要的文件、配置搜索排除模式以忽略无需索引的目录（如node_modules）、调整AI上下文的收集范围以避免加载过多文件，以及使用工作区信任设置。</div>
          </div>
          <div class="card-source">来源: 8.3 常见问题与优化 -> 性能调优</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技巧</div>
          <div class="card-question">当遇到AI生成不相关或质量低的代码时，文档提供了哪些解决方案？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技巧</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档提供的解决方案包括：为AI提供更充分的上下文信息，精简或尝试重新表述你的提示词，或者更换正在使用的AI模型。</div>
          </div>
          <div class="card-source">来源: 8.3 常见问题与优化 -> 问题排查指南</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技巧</div>
          <div class="card-question">什么是“思维链提示法”，以及它如何用于与Cursor的AI进行高级互动？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技巧</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“思维链提示法”是一种引导AI分步骤思考复杂问题的技巧。它要求AI展示其决策过程和考虑的因素，从而允许用户在每个步骤中介入，进行人工判断和指导，以获得更精确的结果。</div>
          </div>
          <div class="card-source">来源: 8.4 持续学习与进阶 -> 高级AI互动模式</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
